import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableHighlight,
} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';

type ItemProps = {
  item: {
    id: String;
    cover: String;
    name: String;
    message: String;
    time: String;
    isTop: Boolean;
  };
};

const Item = ({item}: ItemProps) => (
  <TouchableHighlight underlayColor="#ddd" onPress={()=>{console.warn(1)}}>
    <View style={ItemStyle.container}>
      <View style={ItemStyle.cover}>
        <Image
          style={ItemStyle.cover}
          source={{uri: item.cover as any}}></Image>
      </View>
      <View style={ItemStyle.content}>
        <View style={ItemStyle.conTop}>
          <Text style={ItemStyle.name}>{item.name}</Text>
          <Text style={ItemStyle.time}>{item.time}</Text>
        </View>

        <Text style={ItemStyle.message} numberOfLines={1} ellipsizeMode="tail">
          {item.message}
        </Text>
        <View></View>
      </View>
    </View>
  </TouchableHighlight>
);
const ItemStyle = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
    // backgroundColor:'red'
  },
  cover: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 10,
  },
  content: {
    flex: 1,
    justifyContent: 'space-around',
  },
  conTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  name: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#000',
  },
  time: {
    fontSize: 12,
    color: '#444',
  },
  message: {
    fontSize: 15,
    color: '#444',
  },
});

export default function Message() {
  const messageList = [
    {
      id: '1',
      cover:
        'https://img1.baidu.com/it/u=2868621349,648436103&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: 'E.',
      message: '哈哈哈哈哈',
      time: '00:02',
      isTop: true,
    },
    {
      id: '2',
      cover:
        'https://img1.baidu.com/it/u=688636785,1316434205&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
      name: '爱跳舞的妹妹',
      message: '你怎么还没起床？',
      time: '昨天',
      isTop: false,
    },
    {
      id: '3',
      cover:
        'https://img2.baidu.com/it/u=1074047834,768905615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: 'boss老板',
      message:
        '你好，请本您找到好工作了吗？有没有考虑一下我这边的工作，收到信息请回复我。',
      time: '星期五',
      isTop: false,
    },
    {
      id: '4',
      cover:
        'https://img1.baidu.com/it/u=1219796681,2384151436&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      name: '旅聊客服',
      message: '亲爱的用户，感觉您的反馈。',
      time: '01-12',
      isTop: false,
    },
    {
      id: '5',
      cover:
        'https://img1.baidu.com/it/u=688636785,1316434205&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
      name: '爱跳舞的妹妹',
      message: '你怎么还没起床？',
      time: '昨天',
      isTop: false,
    },
    {
      id: '6',
      cover:
        'https://img2.baidu.com/it/u=1074047834,768905615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: 'boss老板',
      message:
        '你好，请本您找到好工作了吗？有没有考虑一下我这边的工作，收到信息请回复我。',
      time: '星期五',
      isTop: false,
    },
    {
      id: '7',
      cover:
        'https://img1.baidu.com/it/u=1219796681,2384151436&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      name: '旅聊客服',
      message: '亲爱的用户，感觉您的反馈。',
      time: '01-12',
      isTop: false,
    },
    {
      id: '8',
      cover:
        'https://img1.baidu.com/it/u=688636785,1316434205&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
      name: '爱跳舞的妹妹',
      message: '你怎么还没起床？',
      time: '昨天',
      isTop: false,
    },
    {
      id: '9',
      cover:
        'https://img2.baidu.com/it/u=1074047834,768905615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: 'boss老板',
      message:
        '你好，请本您找到好工作了吗？有没有考虑一下我这边的工作，收到信息请回复我。',
      time: '星期五',
      isTop: false,
    },
    {
      id: '10',
      cover:
        'https://img1.baidu.com/it/u=1219796681,2384151436&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      name: '旅聊客服',
      message: '亲爱的用户，感觉您的反馈。',
      time: '01-12',
      isTop: false,
    },
  ];
  return (
    <View style={style.container}>
      <View style={style.topTags}>
        <View style={style.topTagsItem}>
          <View style={style.topTagsItemIcon}>
            <Icon name="heart" size={20} color="#fa5252" />
          </View>
          <Text>赞和收藏</Text>
        </View>
        <View style={style.topTagsItem}>
          <View style={[style.topTagsItemIcon, {backgroundColor: '#74c0fc'}]}>
            <Icon name="user" size={22} color="#1971c2" />
          </View>
          <Text>新增关注</Text>
        </View>
        <View style={style.topTagsItem}>
          <View style={[style.topTagsItemIcon, {backgroundColor: '#c0eb75'}]}>
            <Icon name="bell" size={20} color="#5c940d" />
          </View>
          <Text>评论和@</Text>
        </View>
      </View>

      <View style={style.container}>
        <FlatList
          data={messageList}
          renderItem={({item}) => <Item item={item} />}
          keyExtractor={item => item.id}
        />
      </View>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
  },
  topTags: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#fff',
    marginTop: 10,
    borderStartColor: 'red',
  },
  topTagsItem: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  topTagsItemIcon: {
    marginBottom: 10,
    borderRadius: 10,
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffc9c9',
  },
});
